<template>
  <div>

    <el-container>
      <el-aside width="200px">

        <el-container>
            <el-header>
              <el-tag style="font-size: 25px;margin-top: 20px;margin-left: 35px;">词库列表</el-tag>
            </el-header>
          <el-main>
             <test3 :receive="receive"/>
          </el-main>
        </el-container>
      </el-aside>

      <el-main>

        <el-form :inline="true">

          <el-form-item>
            <el-select v-model="angleId" placeholder="角度请选择">
              <el-option
                  v-for="item in searchForm.options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input
                v-model="searchForm.name"
                placeholder="内容关键字"
                clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="getContentList">搜索</el-button>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogVisible = true">新增</el-button>
          </el-form-item>
          <el-form-item>

            <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null,null)">
              <el-button type="danger" slot="reference" :disabled="delBtlStatu">批量删除</el-button>
            </el-popconfirm>
          </el-form-item>
          <el-form-item style="float: right!important;">
            <el-button type="info" @click="refresh" icon="el-icon-refresh"></el-button>
          </el-form-item>

        </el-form>

        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            stripe
            @selection-change="handleSelectionChange">

          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="内容编号"
              width="120">
          </el-table-column>

          <el-table-column
              prop="lexName"
              label="所属词库"
              width="120">
          </el-table-column>

          <el-table-column
              prop="angleName"
              label="所属角度"
              show-overflow-tooltip>
          </el-table-column>

          <el-table-column
              prop="bodys"
              label="内容"
              show-overflow-tooltip>
          </el-table-column>


          <el-table-column
              label="操作">

            <template slot-scope="scope">

              <el-button type="primary"  icon="el-icon-edit" @click="editHandle(scope.row.id)" circle></el-button>
              <el-divider direction="vertical"></el-divider>

              <template>
                <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.lexId,scope.row.aid)">
                  <el-button type="danger" slot="reference" icon="el-icon-delete" circle></el-button>
                </el-popconfirm>
              </template>

            </template>
          </el-table-column>

        </el-table>


        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 20, 30]"
            :current-page="current"
            :page-size="size"
            :total="total">
        </el-pagination>


        <!--新增对话框-->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="600px"
            :before-close="handleClose">

          <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">

            <el-form-item label="内容" prop="name" label-width="100px">
              <el-input  :autosize="{ minRows: 5, maxRows: 15}"  type="textarea" v-model="editForm.bodys" autocomplete="off"></el-input>
            </el-form-item>




            <el-form-item>
              <el-button type="primary" @click="submitForm('editForm')">立即创建</el-button>
              <el-button @click="resetForm('editForm')">重置</el-button>
            </el-form-item>
          </el-form>

        </el-dialog>


      </el-main>
    </el-container>


  </div>
</template>

<script>
import test3 from "@/components/test3";
export default {

  name: "Content",
  components: {test3},
  data() {
    return {
      searchForm: {},
      angleId:null,
      delBtlStatu: true,
      lexId:'',
      total: 0,
      size: 5,
      current: 1,


      dialogVisible: false,
      editForm: {

      },

      tableData: [],

      editFormRules: {
        bodys: [
          {required: true, message: '请输入内容', trigger: 'blur'}
        ],
      },

      multipleSelection: [],




    }
  },
  created() {
    this.getContentList()
    this.selectAngleList()
  },
  methods: {

    receive(lexId){
      this.lexId = lexId
      console.log(this.lexId)
      this.getContentList()
      this.selectAngleList()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log("勾选")
      console.log(val)
      this.multipleSelection = val;

      this.delBtlStatu = val.length == 0
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getContentList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val
      this.getContentList()
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false
      this.editForm = {}

    },
    handleClose() {
      this.resetForm('editForm')
    },

    getContentList() {
      this.$axios.get("/sys/content/list", {
        params: {
          bodys: this.searchForm.name,
          current: this.current,
          size: this.size,
          lexId: this.lexId,
          aid: this.angleId

        }
      }).then(res => {
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/content/' + (this.editForm.id?'update' : 'save'), this.editForm)
              .then(res => {

                this.$message({
                  showClose: true,
                  message: '恭喜你，操作成功',
                  type: 'success',
                  onClose:() => {
                    this.getContentList()
                  }
                });

                this.dialogVisible = false
                this.resetForm(formName)
              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    editHandle(id) {
      this.$axios.get('/sys/content/info/' + id).then(res => {
        this.editForm = res.data.data

        this.dialogVisible = true
      })
    },
    delHandle(lexId,aid) {

      var contents = []

      if (lexId && aid) {
        var content = {lexId,aid}
        contents.push(content)
      } else {
        this.multipleSelection.forEach(row => {
          var content = {lexId:row.lexId,aid:row.aid}
          contents.push(content)
        })
      }


      this.$axios.post("/sys/content/delete", contents).then(res => {
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose:() => {
            this.getContentList()
          }
        });
      })
    },
    selectAngleList(){
      this.$axios.get("/sys/angle/selectAngleList",{
        params: {
          lexId:this.lexId,
        }
      }).then(res=>{
          this.searchForm.options = res.data.data
      })

    },
    refresh(){
      this.current = 1
      this.size = 5
      this.searchForm.name = ''
      this.lexId = null
      this.angleId = null
      this.getContentList()
      this.selectAngleList()
    }



  }

}
</script>

<style scoped>
.el-pagination {
  float: right;
  margin-top: 22px;
}

</style>
<style>


</style>
